<template>
  <div class="flex flex-col h-full">
    <div class="h-16">
      <div class="w-[616px] h-full bg-first-title bg-size-full">
        <div class="pl-[60px] text-[40px] text-white font-[YouSheBiaoTiHei]">近期预计进厂</div>
      </div>
    </div>
    <div class="flex-1 mt-10 bg-module3-bg bg-size-full">
      <div class="w-full h-full" ref="chart"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

onMounted(() => {
  drawFigure();
});

const chart = ref<HTMLDivElement | null>(null);
const drawFigure = () => {
  const myChart = echarts.init(chart.value as HTMLDivElement);
  const options = {
    title: {
      subtext: '单位: t',
      subtextStyle: {
        fontSize: 24,
        color: 'rgba(255,255,255,0.7)'
      },
      padding: [40, 0, 0, 45]
    },
    grid: {
      left: 100,
      right: 100,
      bottom: 100,
      top: 100
    },
    xAxis: {
      data: ['粉矿', '精粉', '烧结矿', '烧结矿2', '其它', '球团矿'],
      axisLabel: {
        color: 'rgba(255,255,255,0.7)',
        fontSize: 24
      }
    },
    yAxis: {
      axisLabel: {
        color: 'rgba(255,255,255,0.7)',
        fontSize: 24
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#314698'
        }
      }
    },
    series: [
      {
        type: 'bar',
        barWidth: 48,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#B2C2FF'
          },
          {
            offset: 1,
            color: '#162F94'
          }
        ]),
        label: {
          show: true,
          distance: 10,
          position: 'top',
          color: 'rgba(255,255,255,0.9)',
          fontSize: 24,
          backgroundColor: '#fe6c7a52',
          borderColor: '#fe6c7a',
          borderRadius: 18,
          borderWidth: 2,
          padding: [10, 12, 5, 12]
        },
        data: [4568, 3267, 1876, 1001, 2589, 1505]
      }
    ]
  };
  myChart.setOption(options);
};
</script>

<style lang="scss" scoped></style>
